{% extends 'game/base.html' %}
{% block style %}
.el-main {
		background: #409EFF url(../../static/avatars/images/user_bg.jpeg) center top no-repeat;
        overflow-x: hidden;
        background-size: cover;
        color: #666;
        font-size: .1rem;
    }
	.mainbox>ul>li:nth-child(1) {
	    width: 40%
	}
	.mainbox>ul>li:nth-child(3) {
	    width: 50%
	}
	.mainbox>ul>li:nth-child(2) {
	    width: 10%;
	    height: 10rem;
	}
	.boxnav {
	    padding-top: .2rem;
	    font-size: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.boxnav i {
	    font-size: .3rem;
	    color: #fff;
	    font-style: normal;
	    margin-left: .05rem;
	}
	
	.boxnav span {
	    color: #ffb43e;
	    background: rgba(255, 255, 255, .05);
	    font-size: .4rem;
	    font-weight: bold;
	    padding: .1rem .04rem;
	    margin-right: .05rem;
	}
{% endblock %}
{% block main %}
	<div class="mainbox">
	    <ul class="clearfix">
	        <li>
	            <div class="logo1">
	                <img src="{{ url_for('static',filename='avatars/images/logo1.png') }}">
	                <span>
	                    <a href="https://gitee.com/iGaoWei/big-data-view">可视化大数据用户案例</a>
	                </span>
	            </div>
	            <div class="boxall" style="height: 1.8rem">
	                <div class="alltitle">今日实时充值总额
	                    <span>real-time</span>
	                </div>
	                <div class="boxnav">
						{% for charge in today_charge %}
							<span>{{ charge }}</span>
						{% endfor %}
						<i> 元</i>
	                </div>
	                <div class="boxfoot"></div>
	            </div>
	            <div class="boxall" style="height: 3.7rem">
	                <div class="alltitle">
	                	<div>
	                		<p>当月收入</p>
	                		{% for charge in total_charge %}
	                            <span class="charge">{{ charge }}</span>
	                        {% endfor %}
	                        <p>元</p>
	                    </div>
	                    <div>
	                        <p>上月收入</p>
	                        {% for charge in last_total_charge %}
	                            <span class="charge">{{ charge }}</span>
	                        {% endfor %}
	                        <p>元</p>
	                    </div>
	                </div>
	                <div id="echarts1" class="chartbox"></div>
	                <div class="boxfoot"></div>
	            </div>
	            <div class="boxall" style="height: 3.4rem">
	                <p class="pth">
	                    <span>序号</span>
	                    <span>游戏</span>
	                    <span>充值金额</span>
	                    <span>时间</span>
	                </p>
	                <div class="wrap">
	                    <ul>
							{% for index,payment in payments %}
	                        <li>
								<p><span><i>{{index}}</i></span><span>{{payment.game_name}}</span><span>{{payment.user_pay_money}}</span>
								    <span>{{payment.order_time}}</span>
								</p>
							</li>
							{% endfor %}
						</ul>
	                </div>
	                <div class="boxfoot"></div>
	            </div>
	        </li>
	        <li>
	            <div class="logo2"><img src="{{ url_for('static',filename='avatars/images/logo.png') }}" style="opacity: 0"></div>
	            <!-- <div class="map" id="map_1"> </div> -->
	        </li>
	        <li>
	            <div class="logo3">
	                <div class="time  pulll_left">
	                    <img src="{{ url_for('static',filename='avatars/images/clock.png') }}">
	                    <span id="current_time"></span>
	                </div>
	            </div>
	            <!-- <div class="boxall" style="height:2.2rem">
	                <div class="alltitle">转化率
	                    <span>real-time</span>
	                </div>
	                <div class="boxfoot"></div>
	                <div class="zhl clearfix">
	                    <div class="zhlbg" style="width: 65%"></div>
	                    <div class="zhltip">65%</div>
	                </div>
	            </div> -->
	            <div class="boxall" style="height:5.5rem">
	                <div class="alltitle">当月游戏收入详情
	                    <span>game-detail</span>
	                </div>
	                <div class="boxfoot"></div>
	                <div class="chartbox" id="echarts3"></div>
	            </div>
	            <div class="boxall" style="height:3.4rem">
	                <div class="alltitle">每月收入
	                    <span>month-income</span>
	                </div>
	                <div class="boxfoot"></div>
	                <div class="chartbox" id="echarts2"></div>
	            </div>
	        </li>
	    </ul>
	    <!-- <div class="copyright"><a
	            href="https://gitee.com/iGaoWei/big-data-view">更多模板：关注公众号【DreamCoders】
	            沪ICP备1234567890-1</a></div> -->
	</div>
{% endblock %}
{% block js %}
	<script type="text/javascript">
		function getTime(){
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth()+1;
			var day = date.getDate();
			var hour = date.getHours();
			hour = hour < 10 ? '0'+hour:hour;
			var minute = date.getMinutes();
			minute = minute<10?'0'+minute:minute;
			var seconds = date.getSeconds();
			seconds = seconds<10?'0'+seconds:seconds;
			return year+'年'+month+'月'+day+'日&nbsp;'+hour+':'+minute+":"+seconds;
		}
		setInterval(function(){
			document.getElementById('current_time').innerHTML=getTime();
		},1000)
	</script>
	<script>
		function get_echarts3(){
			$.ajax({
			url: "{{url_for('admin.pie_charge_detail')}}",
			type: "post",
			data: "{}",
			success: function(data){
				option3 = {
					tooltip: {
						trigger: 'item',
						formatter: function(params){
							return params.data.name+'<br>'+'收入:	'+
								   params.data.value+'<br>'+'占比: 	'+params.percent+'%';
						},
					},
					
					series: [
						{
							name: 'Nightingale Chart',
						    type: 'pie',
						    labelLine: {
								  length: 30
							},
							radius: ['40%','70%'],
							center: ['50%', '50%'],
							emphasis: {
								label: {
									show :true,
									fontsize: '30',
									fontWeight: 'bold',
								}
							},
							data:data.data,
						}
					]
				};
				var myChart3 = echarts.init(document.getElementById('echarts3'));
				myChart3.setOption(option3);
			}
			});
		}
		function get_echarts2(){
			$.ajax({
			url: "{{url_for('admin.year_charge')}}",
			type: "post",
			data: "{}",
			success: function(data){
				var myChart2 = echarts.init(document.getElementById('echarts2'));
				max_value = Math.max.apply(null,data.value)+100;
				min_value = Math.min.apply(null,data.value)-100;
				option2 =  {
					//  backgroundColor: '#00265f',
					tooltip: {
						trigger: 'axis',
					},
					axisPointer: {
						type: 'shadow',
					},
					legend: {
						data: [{
							name: '收入',
							textStyle: {
								color: "#e5eb0f",
							},
						}],
						bottom: '3%',
						itemWidth: 10,
						itemHeight: 10,
						itemGap: 35
					},
					grid: {
						left: '0%',
						top: '0%',
						right: '0%',
						bottom: '15%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: data.data_index,
						axisLine: {
							show: true,
							lineStyle: {
								color: "rgba(255,255,255,.1)",
								width: 1,
								type: "solid"
							},
						},
						axisLabel:{
							show: true,
							color: '#edf40d'
						},
						axisTick: {
							show: false,
						},
						splitNumber: 15,
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							//formatter: '{value} %'
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "rgba(255,255,255,.1 )",
								width: 1,
								type: "solid"
							},
						},
						splitLine: {
							lineStyle: {
								color: "rgba(255,255,255,.1)",
							}
						},
						max: max_value,
						min: min_value,
					},
					series: [{
						name: '收入',
						data: data.value,
						type: 'line',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						},
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#f8b135'
							}, {
								offset: 1,
								color: '#e59100'
							}]),
							opacity: 1,
							borderRadius: 50,
						}
					}]
				};
	
				myChart2.setOption(option2);
			}
			});
		}
		get_echarts3();
		get_echarts2();
	</script>
	<script type="text/javascript">
		
		var myChart1 = echarts.init(document.getElementById('echarts1'));
		var date = new Date();
		option1 = {
			//  backgroundColor: '#00265f',
			tooltip: {
				trigger: 'axis',
				formatter: function(params){
					year = date.getFullYear();
					month = date.getMonth()+1;
					let title = '收入对比'+'<br>';
					let now = '';
					let last = '';
					if ( params[1]){
						last = year+'-'+(month-1)+'-'+params[1].name+":	"+params[1].data+'元';
					}
					if ( params[0]){
						now = year+'-'+month+'-'+params[0].name+":	"+params[0].data+'元<br>';
					}
					return title+now+last ;
					
					
				},
			},
			axisPointer: {
				type: 'shadow',
			},
			legend: {
				data: [{
					    name: '当月收入',
					    textStyle: {
						    color: "#e5eb0f",
                        },
                    },
                    {
                        name: '上月收入',
                        textStyle:{
                        	color:"#fff"
                        }
                    },
				],
				bottom: '3%',
				itemWidth: 10,
				itemHeight: 10,
				itemGap: 35
			},
			grid: {
				left: '0%',
				top: '0%',
				right: '0%',
				bottom: '15%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				// data: {{ month_list }},
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1)",
						width: 1,
						type: "solid"
					},
				},
				axisTick: {
					show: false,
				},
				splitNumber: 15,
			},
			yAxis: {
				type: 'value',
				axisLabel: {
					//formatter: '{value} %'
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1 )",
						width: 1,
						type: "solid"
					},
				},
				splitLine: {
					lineStyle: {
						color: "rgba(255,255,255,.1)",
					}
				},
				max: {{ max_reg_num }}+100,
			},
			series: [{
				name: '当月注册人数',
				data: {{ user_list }},
				type: 'bar',
				showBackground: true,
				backgroundStyle: {
					color: 'rgba(180, 180, 180, 0.2)'
				},
				barWidth: '25%', //柱子宽度
				// barGap: 1, //柱子之间间距
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#3ca1ff'
					}, {
						offset: 1,
						color: '#0a73d5'
					}]),
					opacity: 1,
					borderRadius: 50,
				},
			},
            {
				name: '上月注册人数',
				data: {{ last_user_list }},
				type: 'bar',
				showBackground: true,
				backgroundStyle: {
					color: 'rgba(180, 180, 180, 0.2)'
				},
				barWidth: '25%', //柱子宽度
				// barGap: 1, //柱子之间间距
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#f8b135'
                        }, {
                            offset: 1,
                            color: '#e59100'
                        }]),
                        opacity: 1,
                        borderRadius: 50,
				}
			},
        ]
		};
		
		myChart1.setOption(option1);
	</script>

{% endblock %}